<template>
  <div class="addExam">
    <el-dialog
      title="查看详情"
      :visible.sync="examDetailShow"
      :fullscreen="true">
      <div class="body-box">
        <div class="mid">
          <div class="mid-inner">
            <div class="mid-left">
              <div :class="['mid-left-list ', chooseIndex >= 0 ? 'choose' :'unChoose']">
                <p :class="['icon iconfont ', chooseIndex >= 0 ? 'icon--_dakai-15' :'icon-xinxi']"></p>
                <p style='width: 100px'>选择时间段</p>
              </div>
              <div :class="['mid-left-list ', chooseIndex >= 1 ? 'choose' :'unChoose']">
                <p :class="['icon iconfont ', chooseIndex >= 1 ? 'icon--_dakai-15' :'icon-xinxi']"></p>
                <p style='width: 100px'>选择分组</p>
              </div>
              <div :class="['mid-left-list ', chooseIndex >= 2 ? 'choose' :'unChoose']">
                <p :class="['icon iconfont ', chooseIndex >= 2 ? 'icon--_dakai-15' :'icon-xinxi']"></p>
                <p style='width: 100px'>选择考站</p>
              </div>
            </div>
            <div class="mid-right">
              <!-- 选择时间 start -->
              <div class="date-box" v-if="chooseIndex === 0">
                <div :class="chooseDateId === item.id ? 'date-box-list chooseDateList' : 'date-box-list unChooseDateList'" class="" v-for="(item, index) in examRecordsDates" :key="index" @click="chooseDateHandle(item)">
                  <div :class="chooseDateId === item.id ? 'chooseDate icon iconfont icon-tongguoBak' : 'unChooseDate icon iconfont icon-danxuanweixuanzhong'"></div>
                  <div>{{ item.examStartDate }} ~ {{ item.examEndDate }}</div>
                </div>
              </div>
              <!-- 选择时间 end -->
              <!-- 选择分组 start -->
              <div class="team-box" v-if="chooseIndex === 1">
                分组
              </div>
              <!-- 选择分组 end -->
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="bot-inner flex">
            <el-button type="primary" @click="toTeam">选择分组</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { recordsDetail } from '@/api/examTest.js'
export default {
  props: ['password'],
  data () {
    return {
      chooseIndex: 0,
      examDetailShow: false,
      examId: '',
      chooseDateId: '',
      examRecordsDates: []
    }
  },
  methods: {
    getDetail (val) {
      this.examDetailShow = true
      this.examId = val.id
      this.getDateDetail()
    },
    // 获取时间段详情
    getDateDetail () {
      let params = {
        id: this.examId
      }
      if (this.password !== null) {
        params.password = this.password
        params.passwordType = 1
      }
      recordsDetail(params).then(res => {
        this.chooseIndex = 0
        this.examRecordsDates = res.data.examRecordsDtos[0].examRecordsDates
        this.chooseDateId = this.examRecordsDates[0].id
      })
    },
    // 选择时间段
    chooseDateHandle (val) {
      if (this.chooseDateId !== val.id) {
        this.chooseDateId = val.id
      }
    },
    // 跳转到分组
    toTeam () {
      this.chooseIndex = 1
    }
  }
}
</script>

<style lang='scss'>
.el-table .warning-row {
  background: #00b99e10;
}

.el-table .success-row {
  background: #ebf2f940;
}
.custom-table {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #00b99e50;
  box-shadow: 0 0 5px #00b99e80;
}
/* 设置表头高度 */
.custom-table .el-table__header-wrapper .el-table__header {
  height: 20px !important; /* 你想要的高度 */
}
.custom-table thead .el-table__cell{
  height: 20px !important; /* 你想要的高度 */
  line-height: 20px !important; /* 你想要的高度 */
  background: #eeeeee;
  
}
.addExam{
  .el-dialog__body{
    padding: 0;
    .body-box{
      background: #fff;
      height: calc( 100vh - 46px );
      padding: 10px;
      flex-direction: column;
      overflow: auto;
      .top{
        width: 100%;
        height: 100px;
        position: fixed;
        top: 46px;
        left: 0;
        background-image: radial-gradient(transparent 1px, #ffffff 1px);
        background-size: 4px 4px;
        backdrop-filter: saturate(50%) blur(10px);
        -webkit-backdrop-filter: saturate(50%) blur(4px);
        z-index: 10;
        .top-inner{
          margin: 20px auto 0;
          height: 80px;
          min-width: 801px;
          max-width: 1000px;
          background-color: rgba(255,255,255,0.1);
        }
        
      }
      .mid{
        margin: 6px 0;
        padding: 8px;
        overflow: auto;
        .mid-inner{
          min-width: 901px;
          max-width: 1400px;
          margin: 0 auto 0;
          padding: 10px 30px;
          background: #f5f5f5;
          height: calc(100vh - 110px);
          overflow: auto;
          border-radius: 10px;
          display: flex;
          .mid-left{
            width: 200px;
            display: flex;
            flex-direction: column;
            padding-top: 100px;
            background: #00b99e10;
            .mid-left-list{
              display: flex;
              height: 40px;
              color: #666;
              display: flex;
              justify-content: center;
              align-items: center;
              .iconfont{
                font-size: 16px !important;
                padding-right: 10px;
              }
            }
            .choose{
              color: #00b99e;
            }
          }
          .mid-right{
            flex: 1;
            height: 100%;
            background: rgba(221, 218, 218, 0.5);
            overflow: auto;
            padding: 10px;
            // 时间段
            .date-box{
              display: flex;
              flex-wrap: wrap;
              .date-box-list{
                width: 360px;
                height: 60px;
                background: #99999930;
                border-radius: 6px;
                margin-right: 10px;
                margin-bottom: 10px;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                .iconfont{
                  font-size: 20px !important;
                  margin-right: 10px;
                }
              }
              .chooseDateList{
                background: #00b99e40;
                color: #00b99e;
                font-weight: 600;
              }
            }
          }
        }
        
      }
      .bot{
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-image: radial-gradient(transparent 1px, #ffffff 1px);
        background-size: 4px 4px;
        backdrop-filter: saturate(50%) blur(10px);
        -webkit-backdrop-filter: saturate(50%) blur(4px);
        z-index: 10;
        .bot-inner{
          min-width: 801px;
          max-width: 1000px;
          margin: 10px auto 0;
          background-color: rgba(255,255,255,0.1);
        }
      }
    }
  }
}

</style>